<template>
	<div style="text-align: left;">
		<h2 style="color: orange;">发布内容</h2>
		<el-form label-width="80px">
			<el-form-item label="文章标题">
				<el-input></el-input>
			</el-form-item>
			<el-form-item label="文章分类">
				<el-radio-group v-model="type">
					<el-radio-button label="1">烘焙食谱</el-radio-button>
					<el-radio-button label="2">烘焙视频</el-radio-button>
					<el-radio-button label="3">资讯</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="二级分类">
				<el-select v-model="value">
					<el-option value="面包"></el-option>
					<el-option value="家常菜"></el-option>
					<el-option value="小食"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="封面">
				<el-upload 
					action="https://jsonplaceholder.typicode.com/posts/" 
					list-type="picture-card"
					:on-preview="handlePictureCardPreview" 
					:on-remove="handleRemove">
					<i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
					<img width="100%" src="" alt="">
				</el-dialog>
			</el-form-item>
			<el-form-item label="文章内容">
				<!-- 富文本编辑器 -->
				<div id="content_div"></div>
			</el-form-item>
			<el-form-item >
				<el-button type="primary">提交</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				dialogVisible: false,
				value:''
			}
		},
		methods: {
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			}
		},
		// mounted()在页面加载时调用
		mounted(){
			//alert(1+1)
			this.editor =new this.wangEditor("#content_div")
			this.editor.create(); //创建富文本编辑器
		}
	}
</script>

<style>
</style>